<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>位置属性总结 | 睡不醒的黑客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="位置属性总结 window element mouseEvent      位置属性总结  window 无offsetParent属性   innerHeight浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它 outerHeightWindow.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（wind">
<meta property="og:type" content="article">
<meta property="og:title" content="位置属性总结">
<meta property="og:url" content="https://hq229075284.github.io/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/index.html">
<meta property="og:site_name" content="睡不醒的黑客">
<meta property="og:description" content="位置属性总结 window element mouseEvent      位置属性总结  window 无offsetParent属性   innerHeight浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它 outerHeightWindow.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（wind">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541667772983&di=af00751939d60be9d3d286a452aac2ef&imgtype=0&src=http%253A%252F%252Fd.hiphotos.baidu.com%252Fimage%252Fpic%252Fitem%252Fa044ad345982b2b723f163ab3cadcbef76099b77.jpg">
<meta property="article:published_time" content="2018-11-06T15:11:18.000Z">
<meta property="article:modified_time" content="2022-08-31T01:14:15.551Z">
<meta property="article:author" content="HanQ">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541667772983&di=af00751939d60be9d3d286a452aac2ef&imgtype=0&src=http%253A%252F%252Fd.hiphotos.baidu.com%252Fimage%252Fpic%252Fitem%252Fa044ad345982b2b723f163ab3cadcbef76099b77.jpg">
    

    

    

    
<link rel="stylesheet" href="/blog/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/blog/libs/open-sans/styles.css">

    
<link rel="stylesheet" href="/blog/libs/source-code-pro/styles.css">


    
<link rel="stylesheet" href="/blog/css/style.css">


    
<script src="/blog/libs/jquery/2.1.3/jquery.min.js"></script>

    
    
        
<link rel="stylesheet" href="/blog/libs/lightgallery/css/lightgallery.min.css">

    
    
        
<link rel="stylesheet" href="/blog/libs/justified-gallery/justifiedGallery.min.css">

    
    
    
    
        <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?c5e2de02c4aac83227b728f6dc16f902";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

    


<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/blog/" id="logo">
                <i class="logo"></i>
                <span class="site-title">睡不醒的黑客</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/blog/.">首页</a>
                
                    <a class="main-nav-link" href="/blog/archives">归档</a>
                
                    <a class="main-nav-link" href="/blog/github">GitHub仓库</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/blog/images/IMG_0049.JPG" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>


</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/blog/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/blog/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/blog/github">GitHub仓库</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/blog/images/IMG_0049.JPG" />
            <h2 id="name">HanQ</h2>
            <h3 id="title">Web Developer &amp; Node Developer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>HangZhou, China</span>
            <a id="follow" target="_blank" href="https://github.com/hq229075284">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                27
                <span>文章</span>
            </div>
            <div class="article-info-block">
                8
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/hq229075284" target="_blank" title="github" >
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main" ><article id="post-位置属性总结" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
	
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541667772983&di=af00751939d60be9d3d286a452aac2ef&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa044ad345982b2b723f163ab3cadcbef76099b77.jpg" class="article-banner" />
	



        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            位置属性总结
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/">
            <time datetime="2018-11-06T15:11:18.000Z" itemprop="datePublished">2018-11-06</time>
        </a>
    </div>


                        
                        
                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- TOC -->

<ul>
<li><a href="#%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93">位置属性总结</a><ul>
<li><a href="#window">window</a></li>
<li><a href="#element">element</a></li>
<li><a href="#mouseevent">mouseEvent</a></li>
</ul>
</li>
</ul>
<!-- /TOC -->

<h1 id="位置属性总结"><a href="#位置属性总结" class="headerlink" title="位置属性总结"></a>位置属性总结</h1><!-- 测试环境：**chrome 70.0.3538.77** -->

<h2 id="window"><a href="#window" class="headerlink" title="window"></a>window</h2><blockquote>
<p>无offsetParent属性</p>
</blockquote>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight" target="_blank" rel="noopener">innerHeight</a><br>浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight" target="_blank" rel="noopener">outerHeight</a><br>Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）</li>
</ul>
<p><img src="https://developer.mozilla.org/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" alt="inner"></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth" target="_blank" rel="noopener">innerWidth</a><br>浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth" target="_blank" rel="noopener">outerWidth</a><br>Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen" target="_blank" rel="noopener">screen</a><ul>
<li>availHeight<br>屏幕中非固定占用空间<a href="%E5%9B%BA%E5%AE%9A%E5%8D%A0%E7%94%A8%E7%A9%BA%E9%97%B4%08%E6%8C%87%E7%9A%84%E6%98%AF%E7%B3%BB%E7%BB%9F%E5%8D%A0%E7%94%A8%E7%9A%84%E7%A9%BA%E9%97%B4%EF%BC%8C%E4%BE%8B%E5%A6%82macOS%E9%A1%B6%E9%83%A8%E7%9A%84%E8%8F%9C%E5%8D%95%E6%A0%8F%E6%88%96%E8%80%85windows%E5%BA%95%E9%83%A8%E7%9A%84%08%E4%BB%BB%E5%8A%A1%E6%A0%8F">^固定占用空间</a>的高度</li>
<li>availLeft<br>屏幕中非固定占用空间的左边离显示器左边的距离</li>
<li>availTop<br>屏幕中非固定占用空间的顶部离显示器顶部的距离</li>
<li>availWidth<br>屏幕中非固定占用空间的宽度</li>
<li>height<br>显示器的纵向分辨率</li>
<li>width<br>显示器的横向分辨率</li>
</ul>
</li>
<li>screenLeft<br>同screen.availLeft</li>
<li>screenTop<br>同screen.availTop</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX" target="_blank" rel="noopener">screenX</a><br>返回浏览器左边界到操作系统桌面左边界的水平距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY" target="_blank" rel="noopener">screenY</a><br>返回浏览器顶部距离系统桌面顶部的垂直距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX" target="_blank" rel="noopener">scrollX</a><br>返回文档/页面水平方向滚动的像素值</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY" target="_blank" rel="noopener">scrollY</a><br>返回文档在垂直方向已滚动的像素值</li>
</ul>
<!-- # documentElement

> offsetParent 为 null

+ clientHeight
+ clientLeft
+ clientTop
+ clientWidth
+ offsetHeight
+ offsetLeft
+ offsetTop
+ offsetWidth
+ scrollHeight
+ scrollLeft
+ scrollTop
+ scrollWidth -->

<!-- # body

> offsetParent 为 null

+ clientHeight
+ clientLeft
+ clientTop
+ clientWidth
+ offsetHeight
+ offsetLeft
+ offsetTop
+ offsetWidth
+ scrollHeight
+ scrollLeft
+ scrollTop
+ scrollWidth -->

<a id="more"></a>

<h2 id="element"><a href="#element" class="headerlink" title="element"></a>element</h2><blockquote>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent" target="_blank" rel="noopener">offsetParent</a>:<br>返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null</p>
</blockquote>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight" target="_blank" rel="noopener">clientHeight</a><br>内部无其它有高度的元素且本身没有设置与高度有关的CSS的外部元素或者display:inline的元素值为0，其他情况下，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth" target="_blank" rel="noopener">clientWidth</a><br>元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距<br><img src="https://developer.mozilla.org/@api/deki/files/185/=Dimensions-client.png"></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft" target="_blank" rel="noopener">clientLeft</a><br>表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop" target="_blank" rel="noopener">clientTop</a><br>一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft" target="_blank" rel="noopener">offsetLeft</a><br>当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移的像素值</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop" target="_blank" rel="noopener">offsetTop</a><br>返回当前元素相对于其 offsetParent 元素的顶部的距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight" target="_blank" rel="noopener">offsetHeight</a><br>返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth" target="_blank" rel="noopener">offsetWidth</a><br>返回一个元素的布局宽度，offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值<br><img src="https://developer.mozilla.org/@api/deki/files/186/=Dimensions-offset.png"></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight" target="_blank" rel="noopener">scrollHeight</a><br>返回元素内容高度的度量，包括由于溢出导致的视图中不可见内容。scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft" target="_blank" rel="noopener">scrollLeft</a><br><strong>读取或设置</strong>元素滚动条到元素左边的距离</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop" target="_blank" rel="noopener">scrollTop</a><br><strong>获取或设置</strong>一个元素的内容垂直滚动的像素数</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth" target="_blank" rel="noopener">scrollWidth</a><br>返回元素的内容区域宽度或元素的本身的宽度中更大的那个值–若元素的宽度大于其内容的区域（例如，元素存在滚动条时）</li>
</ul>
<h2 id="mouseEvent"><a href="#mouseEvent" class="headerlink" title="mouseEvent"></a>mouseEvent</h2><ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX" target="_blank" rel="noopener">clientX</a><br>事件发生时的应用客户端区域的水平坐标</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY" target="_blank" rel="noopener">clientY</a><br>提供事件发生时的应用客户端区域的垂直坐标</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX" target="_blank" rel="noopener">layerX</a>(<strong>非标准</strong>)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerY" target="_blank" rel="noopener">layerY</a>(<strong>非标准</strong>)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX" target="_blank" rel="noopener">movementX</a><br>当前事件和上一个mousemove事件之间鼠标在水平方向上的移动值</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY" target="_blank" rel="noopener">movementY</a><br>当前事件和上一个 mousemove 事件之间鼠标在水平方向上的移动值</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX" target="_blank" rel="noopener">offsetX</a>(<strong>实验中的功能</strong>)<br>事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetY" target="_blank" rel="noopener">offsetY</a>(<strong>实验中的功能</strong>)<br>事件对象与目标节点的内填充边（padding edge）在 Y 轴方向上的偏移量</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX" target="_blank" rel="noopener">pageX</a><br>返回事件对象相对于整个文档左侧的距离（考虑页面的水平方向上的滚动）</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY" target="_blank" rel="noopener">pageY</a><br>返回事件对象相对于相对于整个文档上侧距离（考虑页面的垂直方向上的滚动）</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX" target="_blank" rel="noopener">screenX</a><br>事件对象相对于屏幕坐标系的水平偏移量</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY" target="_blank" rel="noopener">screenY</a><br>事件对象相对于屏幕坐标系的垂直偏移量</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/x" target="_blank" rel="noopener">x</a>(<strong>实验中的功能</strong>)<br>MouseEvent.clientX 属性的别名</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/y" target="_blank" rel="noopener">y</a>(<strong>实验中的功能</strong>)<br>MouseEvent.clientY 属性的别名</li>
</ul>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="https://hq229075284.github.io/blog/2018/11/%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E6%80%BB%E7%BB%93/" data-id="cl7gxergd0009o4tl95js4221" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/blog/2018/11/%E5%9F%BA%E6%9C%AC%E6%8E%92%E5%BA%8F%E6%B3%95%E6%A6%82%E8%A7%88/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    基本排序法概览
                
            </div>
        </a>
    
    
        <a href="/blog/2018/10/%E9%A1%B5%E9%9D%A2%E7%BC%A9%E6%94%BE%E3%80%81%E9%80%BB%E8%BE%91%E5%83%8F%E7%B4%A0%E4%B8%8E%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%E8%BD%AC%E5%8C%96/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">页面缩放、逻辑像素与物理像素转化</div>
        </a>
    
</nav>


    
</article>


    
    

</section>
            
                
<aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/08/notes/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/blog/2022/08/notes/" class="title">notes</a></p>
                            <p class="item-date"><time datetime="2022-08-31T01:14:15.551Z" itemprop="datePublished">2022-08-31</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/04/css-grid/" class="thumbnail">
    
    
        <span style="background-image:url(https://s1.ax1x.com/2022/04/15/L8yHat.jpg)" alt="Grid" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/04/css-grid/" class="title">Grid</a></p>
                            <p class="item-date"><time datetime="2022-04-15T16:11:20.000Z" itemprop="datePublished">2022-04-15</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/04/css%E4%BC%98%E5%85%88%E7%BA%A7/" class="title">css选择器和style属性的权值计算和比较</a></p>
                            <p class="item-date"><time datetime="2022-04-15T16:11:10.000Z" itemprop="datePublished">2022-04-15</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2022/01/border-image-slice/" class="thumbnail">
    
    
        <span style="background-image:url(https://www.wangzhanchengxu.com/uploadfile/2017/0325/20170325114208581.gif)" alt="border-image-slice" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/blog/categories/css/">css</a></p>
                            <p class="item-title"><a href="/blog/2022/01/border-image-slice/" class="title">border-image-slice</a></p>
                            <p class="item-date"><time datetime="2022-01-13T16:55:16.000Z" itemprop="datePublished">2022-01-13</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/blog/2021/12/css%E4%B8%BB%E9%A2%98%E5%8C%96/" class="title">css主题化</a></p>
                            <p class="item-date"><time datetime="2021-12-01T16:10:24.000Z" itemprop="datePublished">2021-12-01</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/css/">css</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/shell/">shell</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/typescript/">typescript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web-api/">web-api</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web%E5%AE%89%E5%85%A8/">web安全</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%85%BC%E5%AE%B9%E6%80%A7/">兼容性</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E8%BF%90%E7%BB%B4/">运维</a><span class="category-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/08/">八月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/04/">四月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/12/">十二月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/05/">五月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/11/">十一月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/06/">六月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/05/">五月 2020</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/01/">一月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/06/">六月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2019/02/">二月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/11/">十一月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/10/">十月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/08/">八月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/05/">五月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2018/03/">三月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2017/08/">八月 2017</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css/" rel="tag">css</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/docker/" rel="tag">docker</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es/" rel="tag">es</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/glob/" rel="tag">glob</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/web-api/" rel="tag">web-api</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/" rel="tag">兼容性</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%8E%9F%E7%90%86/" rel="tag">计算器原理</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/blog/tags/css/" style="font-size: 20px;">css</a> <a href="/blog/tags/docker/" style="font-size: 15px;">docker</a> <a href="/blog/tags/es/" style="font-size: 10px;">es</a> <a href="/blog/tags/es6/" style="font-size: 10px;">es6</a> <a href="/blog/tags/glob/" style="font-size: 10px;">glob</a> <a href="/blog/tags/web-api/" style="font-size: 10px;">web-api</a> <a href="/blog/tags/%E5%85%BC%E5%AE%B9%E6%80%A7/" style="font-size: 10px;">兼容性</a> <a href="/blog/tags/%E8%AE%A1%E7%AE%97%E5%99%A8%E5%8E%9F%E7%90%86/" style="font-size: 10px;">计算器原理</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://hexo.io" target="_blank" rel="noopener">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2022 HanQ<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice" target="_blank" rel="noopener">PPOffice</a>
        </div>
    </div>
</footer>
        


    
        
<script src="/blog/libs/lightgallery/js/lightgallery.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-thumbnail.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-pager.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-autoplay.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-fullscreen.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-zoom.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-hash.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-share.min.js"></script>

        
<script src="/blog/libs/lightgallery/js/lg-video.min.js"></script>

    
    
        
<script src="/blog/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>

    
    



<!-- Custom Scripts -->

<script src="/blog/js/main.js"></script>


    </div>
</body>
</html>